<template>
  <div class="login">
    <div class="login-box" v-if="ismsg === 0">
      <div class="header">
          <div v-for="item in land" :key="item.id" @click="isLogin(item.id)" :class="isActive == item.id ? 'activecolor' : ''">
            {{ item.name }}
            <div
              class="header-active"
              :class="isActive == item.id ? 'active' : ''"
            ></div>
          </div>
        </div>
        <div class="loginpassword"  v-if="isActive == 0">
          <el-form :model="ruleForm" ref="ruleForm" label-position="rigth">
            <el-form-item style="margin-bottom: 18px;height:37.5px" class="check">
              <el-input
                class="input"
                placeholder="手机号"
                prefix-icon="el-icon-mobile-phone"
                v-model="ruleForm.phone"
                style="height: 100%"
              ></el-input>
            </el-form-item>
            <el-form-item class="check" style="margin-bottom:19px">
              <el-input
                style="height:37.5px"
                auto-complete="new-password"
                placeholder="密码"
                :type="ispassword"
                autocomplete="off"
                prefix-icon="el-icon-lock"
                v-model="ruleForm.password"
              ></el-input>
              <div class="openimage" @click="isOpen">
                <img
                  class="open"
                  :src="passcheck.hide"
                  v-show="isicon == true"
                  alt=""
                />
                <img
                  class="open"
                  :src="passcheck.open"
                  v-show="isicon == false"
                  alt=""
                />
              </div>
            </el-form-item>
          </el-form>
          <div class="password-setting">
            <div>
              <el-checkbox style="fontSize:9px" el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
            <div class="forget"><router-link to="/forget-password">忘记密码？</router-link></div>
          </div>
          <div class="error-box">
            <div class="error" v-show="errmessage.err">
            <i class="el-icon-warning"></i>
            <span>{{ errmessage.message }}</span>
          </div>
          </div>
          <el-button type="primary" @click="getLogin(ruleForm)">登录</el-button>
          <div class="register" @click="goRegister()">立即注册</div>
        </div>
        <Verification v-else></Verification>
       
    </div>
     <Loginmsg v-else></Loginmsg>
  </div>
</template>
<script>
import { mapGetters, mapActions} from "vuex";
import Verification from './components/Verification.vue'
import Loginmsg from './components/loginmsg.vue'
export default {
  name: "login",
  components: {
    Verification,
    Loginmsg
  },
  data() {
    return {
      isicon: true,
      ismsg:0,
      ispassword: "password",
      passcheck: {
        hide: require("@/assets/images/login/hide.png"),
        open: require("@/assets/images/login/open.png"),
      },
      land: [
        { id: 0, name: "密码登录" },
        { id: 1, name: "验证码登录" },
      ],
      ruleForm: {
        //手机号登录
        phone: "",
        password: "",
      },
      isActive: 0,
      errmessage: {
        err: false,
        message: "",
      },
      checked: true,
    };
  },
  mounted() {
    
  },
  methods: {
    ...mapActions(["passwordLogin"]),
    isLogin(index) {
      this.isActive = index;
    },
    isOpen() {
      this.isicon = !this.isicon;
      if (this.isicon == true) {
        this.ispassword = "password";
      } else {
        this.ispassword = "text";
      }
    },
    getLogin(ruleForm) {
      if (!this.ruleForm.phone) {
        this.errmessage = {
          err: true,
          message: "请输入手机号",
        };
      }else if (!/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(this.ruleForm.phone)) {
        this.errmessage = {
          err: true,
          message: "手机号错误，请重输入",
        };
      } else if (!this.ruleForm.password) {
        this.errmessage = {
          err: true,
          message: "密码错误，请重输入",
        };
      } else {
        this.passwordLogin(this.ruleForm).then((res)=>{
          this.ismsg = 1
          this.$message({
            message: '恭喜你，登录成功',
            type: 'success'
          });
          this.$router.push({
            name:'wap-user-center'
          })
        });
      }
    },
    goRegister() {
      this.$router.push({
        name: "register",
      });
    },
  },
  computed: {
    ...mapGetters(["homeData"]),
  },
};
</script>
<style scoped>
.login{
  background: #fafafa;
  min-height: 40vh;
  padding: 15px;
}
.login-box{
padding: 0px 10px;
height: 337px;
background: #FFFFFF;
box-shadow: 0px 2.5px 6px 0px rgba(3, 3, 3, 0.1);
}
.header{
  display: flex;
  justify-content: space-around;
  line-height: 35px;
  padding: 10px 27px;
  color: #999;
}
.header-active {
  width: 50px;
  height: 2px;
  margin: 0 auto;
  color: #999;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
.activecolor{
  color: #333;
}
.active {
  background: #0e93e4;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 15px;
}
.loginpassword{
  padding: 0px 12px;
  margin-top: 20px;
}
.open{
  position: absolute;
  top: -8px;
  right: 0px;
}
.password-setting{
  display: flex;
  justify-content: space-between;
  margin-top: 19px;
  font-size: 9px;
  color: #333333;
  font-family: Source Han Sans CN;
font-weight: 400;
margin-bottom:10px;
}
.el-checkbox{
  font-size: 9px;
  color: #333333;
  font-family: Source Han Sans CN;
}
.el-button{
width: 100%;
height: 37px;
background: #0E93E4;
box-shadow: 0px 3px 14px 0px rgba(50, 129, 255, 0.51);
border-radius: 1px;
margin-top: 10px;
font-size: 15px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
letter-spacing: 4px;
}
.error-box{
  height: 22px;
}
.error {
  height: 22px;
  background: #feefef;
  border: 1px dashed #ffd5d5;
  font-size: 9px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ff1e1e;
  line-height: 22px;
}
.error i {
  font-size: 14px;
  margin: 0 7px;
}
.register{
  font-size: 9px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #0e93e4;
  float: right;
  margin-top: 20px;
}
.forget a{
  color: #333333;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
</style>